<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      position: relative;
    }
    ul{
      position: absolute;
      bottom: 50px;
      left: 150px;
      display: flex;
    }
     ul li{
      height: 20px;
      width: 20px;
      background-color: pink;
      margin: 2px;
       list-style: none;
       text-align: center;
    }
     img{
       height: 500px;
       width: 500px;
     }
  </style>
</head>
<body>
<div>
  <img src="https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f3/fc9e3a98/cr/s/q.jpg" alt="">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    let imgS = document.querySelector("img")
    let lis = document.querySelectorAll("ul > li")
    for (let i = 0; i < lis.length; i++) {
      lis[i].index = i
      let arr = ["https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f3/fc9e3a98/cr/s/q.jpg",
        "https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000367/100022199941/FocusFullshop/CkNqZnMvdDEvNzQ1OTYvMjgvMjE0NDYvMTI4NTQ5LzYyZWQ2ZGFlRWVkMTZkZjBjLzM1OWU1ZmEwZTQwMTVlMGUucG5nEgk1LXR5XzBfNTYwAjjvi3pCEwoP5Y2O56GV56yU6K6w5pysEAFCEQoN56eS5p2A5Lu3NzQ5ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOmAiRAHWIXNps70Ag/cr/s/q.jpg",
        "https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100018322085/FocusFullshop/CkNqZnMvdDEvNjcxNTMvMTUvMjE0OTQvMTAxODIyLzYyZjZhOGExRTM3MDllYTE5L2Y0NmUzMjA1NTNiZTBkNTkucG5nEgkzLXR5XzBfNTQwAjjui3pCEAoMUk9H5ri45oiP5pysEAFCEQoN56eS5p2A5Lu3OTk5ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWKX1ucz0Ag/cr/s/q.jpg"
      ]
      lis[i].onclick = function () {
        imgS.src = arr[this.index]
        console.log(arr[this.index])
        // if (this.index === 0){
        //   imgS.src = "https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6f3/fc9e3a98/cr/s/q.jpg"
        // }
        // if (this.index === 1){
        //   imgS.src = "https://img14.360buyimg.com/da/s1180x940_jfs/t1/144874/21/27761/89160/62d67642E51afe550/7287ccd57e597e2a.jpg.avif"
        // }
        // if (this.index === 2){
        //   imgS.src = "https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100018322085/FocusFullshop/CkNqZnMvdDEvNjcxNTMvMTUvMjE0OTQvMTAxODIyLzYyZjZhOGExRTM3MDllYTE5L2Y0NmUzMjA1NTNiZTBkNTkucG5nEgkzLXR5XzBfNTQwAjjui3pCEAoMUk9H5ri45oiP5pysEAFCEQoN56eS5p2A5Lu3OTk5ORACQhAKDOeri-WNs-aKoui0rRAGQgoKBuS8mOi0qBAHWKX1ucz0Ag/cr/s/q.jpg"
        // }
      }
    }
  </script>
</div>
</body>
</html>